import React, { Component } from 'react';
import { Modal, Input, Dropdown, Menu, Icon, message } from 'antd';
import cass from 'classnames';
import s from './index.module.less';
import LabelItem from '../../../components/LabelItem';

const confirm = Modal.confirm;
function showConfirm({ title, content, onOk }) {
    confirm({
        okText: '确定',
        cancelText: '取消',
        title,
        content,
        onOk,
    });
}

class InfoHeader extends Component {

    state = {
        edit: null,
        name: '',
    }

    componentWillMount() {
        // 详情的时候才做这个处理
        if (!this.props.create) {
            const { detailData: { name } } = this.props;
            this.setState({ name, defaultName: name });
        }
    }

    // 不可修改，父组件要通过getValue()获取值
    getValue = () => {
        return this.state.name;
    }

    setValue = (v) => {
        this.setState(v);
    }

    // 取消编辑
    onCancelEdit = () => {
        const { defaultName: name } = this.state;
        this.setState({ edit: false, name });
    }

    onSave = () => {
        const name = this.getValue();
        const { detailData, projectState: { saveName } } = this.props;
        if (!name) {
            message.warn('项目名称不能为空');
            return;
        };

        saveName({
            projectname: name,
            projectid: detailData.projectid
        }, () => {
            message.success('修改成功');
            this.setState({ edit: false, defaultName: name }); // 修改默认值
        })
    }

    handleProjectComplete = () => {
        const { detailData: { iscomplete, projectid, stages }, projectState: { manageProject } } = this.props;
        const key = iscomplete ? 'restartProject' : 'completeProject'
        if (iscomplete) {
            showConfirm({
                title: '确定重启项目？',
                content: '',
                onOk: () => {
                    manageProject({
                        key,
                        value: !iscomplete,
                        params: { projectid }
                    }, () => {
                        message.success('重启项目成功');
                    });
                },
            })
            return;
        }

        const allComplete = stages.every(s => s.iscomplete);
        if (!allComplete) {
            message.warn('请确保该项目下的所有阶段都已完成再设置项目为完成状态');
            return;
        }
        if (allComplete) {
            showConfirm({
                title: '全部阶段已完成，确定设置该项目为完成吗',
                content: '',
                onOk: () => {
                    manageProject({
                        key,
                        value: !iscomplete,
                        params: { projectid }
                    }, () => {
                        message.success('设置项目已完成成功');
                    });
                },
            })
        }
    }

    renderEditBtn = (edit, create) => {
        const { isBoss, detailData: { iscomplete } } = this.props;
        let btn = null;
        if (!create && isBoss) {
            btn = [
                (
                    edit ?
                        [
                            <span onClick={this.onCancelEdit} key="cancle" className={s.save}>取消</span>,
                            <span onClick={this.onSave} key="edit" className={s.save}>保存</span>,
                        ] :
                        <Icon key="edit" type="edit" onClick={() => this.setState({ edit: true })} className="mainColor" />
                ),
                (
                    <Dropdown
                        key="dot"
                        overlay={(
                            <Menu onClick={({ key }) => this[key]()}>
                                <Menu.Item key="handleProjectComplete">{iscomplete ? '重启项目' : '完成项目'}</Menu.Item>
                            </Menu>
                        )}
                    >
                        <span className={cass('mdi', 'mdi-dots-horizontal', s.dots, 'mainColor')} />
                    </Dropdown>
                )
            ]
        }

        if (btn && iscomplete) {
            btn = btn.slice(1);
        }

        return btn
    }

    render() {
        const { create } = this.props;
        const { edit, name } = this.state;

        return (
            <div className={s.header}>
                <LabelItem
                    col={1}
                    value={name}
                    label={'项目名称'}
                    edit={edit || create}
                    require={edit || create}
                    extra={this.renderEditBtn(edit, create)}
                    dom={<Input value={name} onChange={(e) => this.setState({ name: e.target.value })} />}
                />
            </div>
        );
    }
}

export default InfoHeader